<template>
    <view class="circle-menu">
        <view class="center" @click="toggleMenu"><u-icon size="44" name="plus" color="#fff" class="icon" :class="{ unfold: showMenu }"></u-icon></view>

        <view class="menu-item" :class="[`menu-item` + index, { hideMenu: !showMenu }]" v-for="(item, index) in menuList" :key="index" @click="selectMenu(item)">
            <image :src="item.icon" mode=""></image>
            <view class="">{{ item.name }}</view>
        </view>
    </view>
</template>
<script>
export default {
    name: '',
    data() {
        return {
            showMenu: false,
            menuList: [
                {
                    name: '刷新',
                    icon: require('@/pages/minePages/static/cloudAlbum/refresh.png'),
                    menuType: 'refresh'
                },
                {
                    name: '上传',
                    icon: require('@/pages/minePages/static/cloudAlbum/upload.png'),
                    menuType: 'upload'
                },
                {
                    name: '下载',
                    icon: require('@/pages/minePages/static/cloudAlbum/downLoad.png'),
                    menuType: 'downLoad'
                },
                {
                    name: '删除',
                    icon: require('@/pages/minePages/static/cloudAlbum/delect.png'),
                    menuType: 'delect'
                }
            ]
        };
    },
    props: {
        menuStatus: {
            type: Boolean,
            default: false
        }
    },
    computed: {},
    onLoad() {},
    onShow() {},
    methods: {
        toggleMenu() {
            this.showMenu = !this.showMenu;
            this.$emit('emitMenuStatus', this.showMenu);
        },
        selectMenu(item) {
            this.$emit('emitSelectMenuItem', item.menuType);
        }
    },
    watch: {
        menuStatus(newVal, oldVal) {
            this.showMenu = newVal;
        },
        immediate: true
    },
    components: {}
};
</script>
<style lang="scss">
.circle-menu {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    .center {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #07c160;
        box-shadow: 0rpx 6rpx 20rpx 0rpx rgba(0, 0, 0, 0.05), 0rpx -6rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 2;
        .icon {
            transition: 0.4s ease-in-out all;
            transform: rotateZ(0);
        }
        .unfold {
            transform: rotateZ(-45deg);
        }
    }
    .menu-item {
        position: absolute;
        left: 0;
        top: 0;
        width: 90rpx;
        height: 90rpx;
        background-color: #ffffff;
        box-shadow: 0rpx 6rpx 20rpx 0rpx rgba(0, 0, 0, 0.05), 0rpx -6rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
        border-radius: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 20rpx;
        line-height: 30rpx;
        transition: 0.4s ease-in-out all;
        image {
            width: 32rpx;
            height: 32rpx;
        }
    }
    .menu-item0 {
        transition-delay: 0;
        transform: translate(0, -120rpx);
    }
    .menu-item1 {
        transition-delay: 0.06s;
        transform: translate(-110rpx, -60rpx);
    }
    .menu-item2 {
        transition-delay: 0.12s;
        transform: translate(-110rpx, 60rpx);
    }
    .menu-item3 {
        transition-delay: 0.18s;
        transform: translate(0, 120rpx);
    }
    .hideMenu {
        transform: translate(0, 0);
    }
}
</style>
